<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" text-color="#fff" background-color="#48452b"
            mode="horizontal" :ellipsis="false">
            <el-menu-item index="index">
                <div class="logo_title">后台管理平台</div>
            </el-menu-item>
            <div class="center" />
            <el-submenu index="user">
                <template #title>{{ username }}</template>
                <el-menu-item index="logout" @click="logOut">退出</el-menu-item>
            </el-submenu>
        </el-menu>
        <div class="container">
            <div class="left-container">
                <el-menu active-text-color="#fff" background-color="#48452b" class="el-menu-vertical-demo"
                    :default-active="defaultActive" text-color="#909399" @select="clickMenuItem">
                    <el-menu-item v-for="(item, index) in leftMenus" :key="index" :index="item.index">
                        <i :class="'el-icon-' + item.icon"></i>
                        <span>{{ item.name }}</span>
                    </el-menu-item>

                </el-menu>
            </div>
            <div class="right-container">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            leftMenus: [
                {
                    index: 'settings',
                    name: '系统设置',
                    icon: 'setting'
                },
                {
                    index: 'userManage',
                    name: '用户管理',
                    icon: 'user'
                },
                {
                    index: 'bannerList',
                    name: '轮播列表',
                    icon: 'picture'
                },
                {
                    index: 'bannerUpload',
                    name: '轮播图上传',
                    icon: 'circle-plus-outline'
                }],
            activeIndex: '1',
            username: '',
            defaultActive: 'settings',
        }
    },

    mounted() {
        this.defaultActive = this.$route.name
        let userInfo = sessionStorage.getItem('userInfo')
        if (userInfo) {
            userInfo = JSON.parse(userInfo)
            this.username = userInfo.username
        }
    },
    methods: {
        clickMenuItem(key) {
            if (key !== this.$route.name) {
                this.$router.push({
                    name: key
                })
            }
        },

        logOut() {
            let userInfo = sessionStorage.getItem('userInfo')
            if (userInfo) {
                userInfo = JSON.parse(userInfo)
                this.$axios.get('/users/backend/logout', {
                    params: {
                        id: userInfo.id
                    }
                }).then(() => {
                    sessionStorage.removeItem('userInfo')
                    sessionStorage.removeItem('token')
                    this.$router.push('/login')
                }).catch(() => {
                    sessionStorage.removeItem('userInfo')
                    sessionStorage.removeItem('token')
                    this.$router.push('/login')
                })
            }

        }
    }
}
</script>

<style scoped>
.logo_title {
    font-size: 24px;
    color: #eea032;
}

.el-menu-demo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #48452b;
}

.center {
    flex-grow: 1;
}

.container {
    display: flex;
    height: calc(100vh - 60px);
}

.left-container {
    width: 220px;
    background-color: #48452b;
}

.right-container {
    width: calc(100% - 220px);
    padding: 0 20px;
}
</style>